<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
let frameMap = ref({
  zx: "https://new.gzac.org/acRobotWeb/#/consultation/askingList",
  ly: "https://new.gzac.org/acRobotWeb/#/consultation/message?isOffical=true",
});

onMounted(async () => {});

const onPlay = (e) => {};
const onPause = (e) => {};
const onTimeupdate = (e) => {};
const onCanplay = (e) => {};
</script>

<template>
  <div class="frame">
    <div ref="outBox" class="outBox">
      <iframe
        id="pageContent"
        :src="frameMap[route.params.key]"
        width="92%"
        height="92%"
        name="demo"
        style="border: 0; padding: 26px 16px 16px 16px"
      ></iframe>
    </div>
  </div>
</template>

<style lang="less" scoped>
.frame {
  height: 100%;
  background: url("/public/img/mobile/bg-empty.png") no-repeat bottom center;
  background-size: cover;
  display: flex;
  .outBox {
    width: 90%;
    height: 90%;
    margin: auto;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    @media only screen and (orientation: landscape) {
      // 横向
      width: calc(100vw * 0.7);
      height: calc(100vw * 0.7 * 0.625);
    }
  }
}
</style>
